<template>
  <div>
    <div class="returnTitle">
      <el-page-header @back="goBack" :content="this.title + '--作答记录详情'"></el-page-header>
    </div>
    <div class="center">
      <el-divider content-position="left">用户信息</el-divider>
      <p>姓名：{{this.name}}</p>
      <p>作答时间：{{this.time}}</p>
      <div v-if="!this.is_multiple">
        <el-divider content-position="left">指导语</el-divider>
        <p>{{this.question}}</p>
        <el-divider content-position="left">详情</el-divider>
        <div v-for="(item, index) in this.list" :key="index">
          <!-- <el-divider content-position="left">{{item.order}}问题：{{item.question}}</el-divider> -->
          <p>{{item.order}}问题：{{item.question}}</p>
          <p>答案：{{item.options}}.{{item.answer}}</p>
          <br>
        </div>
      </div>
      <div v-else>
        <div v-for="(item, index) in this.list" :key="index">
          <el-divider content-position="left">{{item.question}}</el-divider>
          <div v-for="n in item.children" :key="n.field">
            <div v-if="n.children">
              <div v-for="m in n.children" :key="m.field">
                <p>{{m.order}}问题：{{m.question}}</p>
                <p>答案：{{m.answer}}</p>
              </div>
            </div>
            <div v-else>
              <p>{{n.order}}问题：{{n.question}}</p>
              <p>答案：{{n.answer}}</p>
            </div>
            <br>
          </div>
          <br>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {APIGETSCALEANSWERINFO} from '@/common/api.js'
export default {
  data () {
    return {
      is_multiple: '',
      name: '',
      title: '',
      time: '',
      question: '',
      list: []
    }
  },
  created () {
    this.title = this.$route.query.title
    this.centerFn()
  },
  methods: {
    goBack () {
      this.$router.push({path: '/checkReport'})
    },
    centerFn () {
      APIGETSCALEANSWERINFO({
        uid: this.$route.query.uid,
        sid: this.$route.query.sid,
        report_id: this.$route.query.report_id
      }).then((res) => {
        console.log(res)
        this.is_multiple = res.data.is_multiple
        this.name = res.data.real_name
        this.time = res.data.create_time
        this.question = res.data.question
        this.list = res.data.question_list
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
